<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Test Vertex Colors</title>
    <!--script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script-->
    <script src="../../build/3Dmol.js"></script>
    <script type="text/javascript">
        /* Draw a pretty triangle in the XY plane with colorful vertices
         */
        function triangle(viewer) {
            var vertices = [];
            var normals = [];
            var colors = [];
            var r = 20;
            //triangle
            vertices.push(new $3Dmol.Vector3(0, 0, 0));
            vertices.push(new $3Dmol.Vector3(r, 0, 0));
            vertices.push(new $3Dmol.Vector3(0, r, 0));

            normals.push(new $3Dmol.Vector3(0, 0, 1));
            normals.push(new $3Dmol.Vector3(0, 0, 1));
            normals.push(new $3Dmol.Vector3(0, 0, 1));

            colors.push({ r: 1, g: 0, b: 0 });
            colors.push({ r: 0, g: 1, b: 0 });
            colors.push({ r: 0, g: 0, b: 1 });

            var faces = [0, 1, 2];

            spec = { vertexArr: vertices, normalArr: normals, faceArr: faces, color: colors };
            viewer.addCustom(spec);
            viewer.render();
        }

        function cylinder(viewer) {
            var vertices = [];
            var normals = [];
            var colors = [];
            var r = 10;

            // "Cylinder" with 4 points (aka a open box with weird normals)
            vertices.push(new $3Dmol.Vector3(r, -2 * r, 0));
            vertices.push(new $3Dmol.Vector3(0, -2 * r, r));
            vertices.push(new $3Dmol.Vector3(-r, -2 * r, 0));
            vertices.push(new $3Dmol.Vector3(0, -2 * r, -r));
            vertices.push(new $3Dmol.Vector3(r, -r, 0));
            vertices.push(new $3Dmol.Vector3(0, -r, r));
            vertices.push(new $3Dmol.Vector3(-r, -r, 0));
            vertices.push(new $3Dmol.Vector3(0, -r, -r));

            normals.push(new $3Dmol.Vector3(1, 0, 0));
            normals.push(new $3Dmol.Vector3(0, 0, 1));
            normals.push(new $3Dmol.Vector3(-1, 0, 0));
            normals.push(new $3Dmol.Vector3(0, 0, -1));
            normals.push(new $3Dmol.Vector3(1, 0, 0));
            normals.push(new $3Dmol.Vector3(0, 0, 1));
            normals.push(new $3Dmol.Vector3(-1, 0, 0));
            normals.push(new $3Dmol.Vector3(0, 0, -1));

            colors.push({ r: 1, g: 0, b: 0 });
            colors.push({ r: 1, g: 1, b: 0 });
            colors.push({ r: 1, g: 1, b: 1 });
            colors.push({ r: 1, g: 0, b: 1 });
            colors.push({ r: .5, g: 0, b: 0 });
            colors.push({ r: .5, g: .5, b: 0 });
            colors.push({ r: .5, g: .5, b: .5 });
            colors.push({ r: .5, g: 0, b: .5 });

            var faces = [0, 4, 1, 4, 5, 1,
                1, 5, 2, 5, 6, 2,
                2, 6, 3, 6, 7, 3,
                3, 7, 0, 7, 4, 0];

            spec = { vertexArr: vertices, normalArr: normals, faceArr: faces, color: colors };
            viewer.addCustom(spec);
            viewer.render();
        }

    </script>
</head>

<body>
    <h1>Test Vertex Colors</h1>
    <p>This document tests the ability to assign a unique color to each vertex by passing an array of colors to a custom
        object. You should see a red-green-blue right triangle, as well as an open box whose colors merge through red,
        magenta, white, and yellow.</p>
    <div id="testColorArrays" style="width: 400px; height: 400px; position: relative;"></div>
    <script>
        (function () {
            var viewer = $3Dmol.createViewer($("#testColorArrays"));
            viewer.setBackgroundColor(0xffffffff);

            triangle(viewer);
            cylinder(viewer);
        })();
    </script>
</body>

</html>